<!--
 * @Descripttion: 
 * @Author: zhanyi
 * @Date: 2021-10-20 16:38:37
 * @FilePath: \wczd-mobile\src\pages\task\task.vue
-->
<template>
  <div class="task">
    <div class="firstTopPanel">
      <div class="title">任务管理</div>
      <div class="select">
        <div :class="queryParams.taskDone===item.value?'selected':'select-item'" v-for="(item,index) in selectData" :key="index" @click="_selectClick(item)">
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="container">
      <z-paging ref="paging" :auto="false" :default-page-size="queryParams.pageSize" :fixed="false" :height="'100%'" v-model="taskData" :refresher-end-bounce-enabled="false" @query="pullUpClick">
        <div class="cont-item" v-for="(item,index) in taskData" :key="index">
          <div class="title">
            <div class="left">{{item.taskName}}</div>
            <div class="right danger-state" :style="{color:item.taskDone==='0'?'#F54A13':item.taskDone==='1'?'#FFB500':'#17D46F'}">{{item.taskDone==='0'?'未排查':item.taskDone==='1'?'排查中':'已排查'}}</div>
          </div>
          <div class="center cont-item-text">
            <div style="text-align: right;">
              <div>{{item.companyName}}</div>
            </div>
            <div class="f right-item">
              <div class="xbfb40">任务时间</div>
              <div style="text-align: right;">
                <div>{{item.taskStartTm}}<br> 至 {{item.taskEndTm}}</div>
              </div>
            </div>
            <div class="f right-item">
              <div class="xbfb40">风险点总数</div>
              <div class="xbfb50">{{item.totalNodeNum}}</div>
            </div>
            <div class="f right-item">
              <div class="xbfb40">已排查</div>
              <div class="xbfb50">{{item.checkNodeNum}}</div>
            </div>
            <div class="f right-item">
              <div class="xbfb40">未排查</div>
              <div class="xbfb50">{{item.totalNodeNum-item.checkNodeNum}}</div>
            </div>
          </div>
          <div class="footer" @click="_goInfo(item)">
            <div class="left">
              点击排查风险点
            </div>
            <div class="right">
              <image src="@/static/wczd/more.png" alt=""></image>
            </div>
          </div>
        </div>
      </z-paging>
    </div>
    <scanBox></scanBox>
  </div>
</template>

<script>
import scanBox from "../component/scan-box/scan-box.vue";
import { mapGetters } from 'vuex'
import { getMyTask } from "@/api/task";

export default {
  name: 'task',
  components: { scanBox },
  data () {
    return {
      dataList: [],
      selectData: [
        { name: '全部', value: '' },
        { name: '未排查', value: '0' },
        { name: '排查中', value: '1' },
        { name: '已排查', value: '2' }
      ],
      taskData: [],
      selected: '',
      onoff: '0',
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        taskDone: ''
      }
    }
  },
  created () { },
  onShow () {
    this.getMyTask()
  },
  methods: {
    // 获取所有任务
    getMyTask () {
      uni.showLoading({
        title: '加载中'
      });
      getMyTask(this.queryParams).then(res => {
        setTimeout(() => {
          this.$refs.paging.complete(res.rows);
          uni.hideLoading()
        }, 200)
      })
    },
    // 进入详情
    _goInfo (item) {
      uni.navigateTo({
        url: '/pages/task/node?id=' + item.id
      })
    },
    _selectClick (item) {
      this.queryParams.taskDone = item.value
      this.$refs.paging.reload(false);
    },
    pullUpClick (pageNo, pageSize) {
      this.queryParams.pageNum = pageNo;
      this.getMyTask()
    }
  },
}
</script>

<style scoped lang="scss">
.task {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .container {
    flex: 1;
    overflow-x: hidden;
    overflow-y: scroll;
    .cont-item {
      margin: 20upx auto 20upx;
      width: 680upx;
      background-color: #fff;
      border-radius: 10upx;
      padding: 15upx 30upx 0 30upx;
      .cont-item-text {
        display: flex;
        flex-direction: column;
      }

      .title {
        display: flex;
        justify-content: space-between;
        .left {
          padding-left: 20upx;
          font-size: 30upx;
          font-weight: bold;
          &::before {
            content: "";
            position: relative;
            left: -20upx;
            height: 30upx;
            width: 3upx;
            border-left: 3px solid #009fdf;
          }
        }
        .right {
          color: #f54a13;
          font-size: 30upx;
        }
      }
      .center {
        padding: 10upx 0;
        display: flex;
        color: #8d9093;
        .left {
          border-radius: 8upx;
          image {
            width: 160upx;
            height: 160upx;
            border-radius: 8upx;
          }
        }
        .right {
          .right-item {
            padding: 0 10upx 0 20upx;
          }
        }
      }
      .footer {
        height: 80upx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #e8e9e9;
        .left {
          font-weight: bold;
          color: #009fdf;
          font-size: 26upx;
        }
        .right {
          display: flex;
          align-items: center;
          image {
            width: 56upx;
            height: 56upx;
          }
        }
      }
    }
  }
}

.firstTopPanel {
  width: 100%;
  height: 200upx;
  background: url("@/static/wczd/login-bk.png") no-repeat;
  background-size: 100% 100%;
  .title {
    padding-top: 20upx;
    font-size: 40upx;
    font-weight: bold;
    padding-left: 40upx;
  }
  .select {
    display: flex;
    padding: 10upx;
    justify-content: space-evenly;
    margin: auto;
    width: 700upx;
    margin-top: 10upx;
    height: 80upx;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 6upx;
    .select-item {
      width: 170upx;
      height: 64upx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 6upx;
      color: #75787b;
    }
    .selected {
      width: 170upx;
      height: 64upx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 6upx;
      background: #009fdf;
      color: #fff;
    }
  }
}

.right-flex {
  flex: 1;
}
</style>
